/* @group Alternative colours 3 */

.essential-colours-alternative3 {
  color: ~"[[setting:alternativethemetextcolor3]]";
  h1, h2, h3, h4, h5, h6,
  #adminsettings h3,
  .color,
  h1#title,
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  .uneditable-input,
  .form-item .form-description,
  .form-defaultinfo,
  .form-label .form-shortname,
  .mform legend a {
    color: ~"[[setting:alternativethemetextcolor3]]";
  }

  .breadcrumb-nav {
    // Some breadcrumb style.
    ul.breadcrumb.style1 {
      li {
        color: ~"[[setting:alternativethemenavcolor3]]";
        background-color: ~"[[setting:alternativethemecolor3]]";
        a {
          color: inherit;
          &:before {
            color: inherit;
          }
          &:hover, &:focus {
            color: ~"[[setting:alternativethemenavcolor3]]";
          }
        }
        &:after {
          border-left-color: ~"[[setting:alternativethemecolor3]]";;
        }
        &:hover {
          color: ~"[[setting:alternativethemenavcolor3]]";
          background-color: ~"[[setting:alternativethemehovercolor3]]";
        }
        &:hover:after {
          border-left-color: ~"[[setting:alternativethemehovercolor3]]";
        }
        &:first-of-type {
          &:hover, &:focus {
            a:before {
              color: ~"[[setting:alternativethemenavcolor3]]";
            }
          }
        }
      }
    }

    ul.breadcrumb.style2 {
      li {
        a {
          color: ~"[[setting:alternativethemenavcolor3]]";
          &:hover {
            color: ~"[[setting:alternativethemehovercolor3]]";
          }
        }
      }
    }
  }
  &.dir-rtl .breadcrumb-nav {
    ul.breadcrumb.style1 {
      li {
        &:after {
          border-right-color: ~"[[setting:alternativethemecolor3]]";;
        }
        &:hover:after {
          border-right-color: ~"[[setting:alternativethemehovercolor3]]";
        }
      }
    }
  }

  a,
  a:visited {
    color: ~"[[setting:alternativethemeurlcolor3]]";
  }

  a:hover {
    color: ~"[[setting:alternativethemehovercolor3]]";
  }

  i {
    color: ~"[[setting:alternativethemeiconcolor3]]";
    &:hover {
      color: ~"[[setting:alternativethemehovercolor3]]";
    }
    &.fa-warning {
      color: inherit;
    }
  }

  a:before {
    color: ~"[[setting:alternativethemeiconcolor3]]";
  }
  a:hover:before {
    color: ~"[[setting:alternativethemehovercolor3]]";
  }

  #page-header {
    h1#title {
      color: ~"[[setting:alternativethemecolor3]]";
    }
    #headerlogo {
      color: ~"[[setting:alternativethemeiconcolor3]]";
    }
  }

  #headerlogo {
    border-right-color: ~"[[setting:alternativethemecolor3]]";
  }
  &.dir-rtl #headerlogo {
    border-left-color: ~"[[setting:alternativethemecolor3]]";
  }

  .breadcrumb-button {
    i {
      vertical-align: middle;
      color: inherit;
      &:hover {
        color: inherit;
      }
    }
    input[type="submit"] {
      color: ~"[[setting:alternativethemenavcolor3]]";
      background-color: ~"[[setting:alternativethemecolor3]]";
      &:hover {
        color: ~"[[setting:alternativethemenavcolor3]]";
        background-color: ~"[[setting:alternativethemehovercolor3]]";
      }
    }
  }

  a.website {
    &:hover, &:focus {
      background-color: ~"[[setting:alternativethemecolor3]]";
    }
  }

  .navbar {
    background-color: ~"[[setting:alternativethemecolor3]]" !important;

    .navbar-inner {
      border-top-color: ~"[[setting:alternativethemecolor3]]" !important;
      border-bottom: 1px solid ~"[[setting:alternativethemecolor3]]" !important;
      background-color: ~"[[setting:alternativethemecolor3]]" !important;

      .dropdown-menu {
        border: 1px solid ~"[[setting:alternativethemecolor3]]";
      }

      .nav > li.dropdown a,
      .nav > li > a {
        color: ~"[[setting:alternativethemenavcolor3]]";
        i {
          color: inherit;
        }
        &:hover {
          color: ~"[[setting:alternativethemecolor3]]";
          background-color: ~"[[setting:alternativethemenavcolor3]]";
        }
      }

      .nav {
        border-right-color: ~"[[setting:alternativethemecolor3]]";
        > li > a {
          color: ~"[[setting:alternativethemenavcolor3]]";
          border-left-color: ~"[[setting:alternativethemecolor3]]";
          i {
            color: inherit;
          }
          &:hover {
            color: ~"[[setting:alternativethemenavcolor3]]";
            background-color: ~"[[setting:alternativethemehovercolor3]]";
          }
        }
        > li.dropdown ul.dropdown-menu {
          > li > a {
            color: ~"[[setting:alternativethemetextcolor3]]";
            &:hover { 
              color: @white; // TODO: Page background colour needs to be a setting.
              background-color: ~"[[setting:alternativethemeurlcolor3]]";
            }
            &:focus, &.open {
              color: @white; // TODO: Page background colour needs to be a setting.
              background-color: ~"[[setting:alternativethemeurlcolor3]]";
              i {
                color: @white; // TODO: Page background colour needs to be a setting.
              }
            }
            i {
              color: ~"[[setting:alternativethemeiconcolor3]]";
            }
          }
          li.dropdown-submenu:hover > a {
            background-color: ~"[[setting:alternativethemeurlcolor3]]";
          }
        }
      }
      .dropdown-menu > li > a:hover,
      .dropdown-menu > li > a:focus,
      .dropdown-submenu:hover > a,
      .dropdown-submenu:focus > a {
        color: ~"[[setting:alternativethemenavcolor3]]";
        background-color: ~"[[setting:alternativethemecolor3]]";
      }

      .brand {
        color: ~"[[setting:alternativethemenavcolor3]]";
      }
    }

    .nav-collapse {
      border-color: ~"[[setting:alternativethemecolor3]]";
    }

    .nav .active > a,
    .nav .active > a:hover,
    .nav .active > a:focus {
      color: ~"[[setting:alternativethemenavcolor3]]";
      background-color: ~"[[setting:alternativethemecolor3]]" !important;
    }
    .nav {
      li.dropdown {
        &.open > .dropdown-toggle, &.active > .dropdown-toggle, &.open.active > .dropdown-toggle {
          color: @white; // TODO: Page background colour needs to be a setting.
          background-color: ~"[[setting:alternativethemehovercolor3]]";
        }
      }
    }

    .navbar-inner .usermenu {
      .dropdown {
        img.userpicture {
          border: 1px solid ~"[[setting:alternativethemenavcolor3]]";
        }
        ul.dropdown-menu {
          border: 1px solid ~"[[setting:alternativethemecolor3]]";
          hr.sep {
            border-bottom: 1px dotted ~"[[setting:alternativethemecolor3]]";
          }
        }
      }
    }

    .navbar-inner .messagemenu {
      ul.nav {
        ul.dropdown-menu {
          border: 1px solid ~"[[setting:alternativethemecolor3]]";
          li > a {
            border-top: 1px dotted ~"[[setting:alternativethemecolor3]]";
            &:hover {
              .message, .notification {
                color: @white; // TODO: Page background colour needs to be a setting.
                background-color: ~"[[setting:alternativethemehovercolor3]]";
                img {
                  &.userpicture, &.profilepicture {
                    box-shadow: 0 0 3px ~"[[setting:alternativethemenavcolor3]]";
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  &.dir-rtl .navbar {
    .navbar-inner {
      .nav {
        border-left-color: ~"[[setting:alternativethemecolor3]]";
        > li > a {
          border-right-color: ~"[[setting:alternativethemecolor3]]";
        }
      }
    }
  }

  .course-content ul.topics li.section.main.clearfix.current {
    box-shadow: 4px 4px 8px 2px ~"[[setting:alternativethemecolor3]]";
  }

  .firstword {
    color: ~"[[setting:alternativethemetextcolor3]]" !important;
  }

  .forumpost {
    .picture img {
      box-shadow: 0 0 3px ~"[[setting:alternativethemecolor3]]";
    }

    .subject {
      color: ~"[[setting:alternativethemetextcolor3]]";
    }
  }

  button,
  input.form-submit,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  #notice .singlebutton+.singlebutton input,
  .submit.buttons input[name=cancel] {
    color: ~"[[setting:alternativethemetextcolor3]]";
  }
  .button {
    a, a:visited {
      background-color: ~"[[setting:alternativethemecolor3]]";
    }
  }

  a.marketing-button,
  a.marketing-button:visited {
    background-color: ~"[[setting:alternativethemecolor3]]";
  }

  a.marketing-button:hover {
    background-color: ~"[[setting:alternativethemehovercolor3]]";
  }

  #essentialCarousel.carousel {
    .carousel-inner {
      // Caption for text below images.
      .carousel-caption {
        background-color: ~"[[setting:alternativethemeslidecaptionbackgroundcolor3]]";
        .opacity(75);
        h4, p {
          color: ~"[[setting:alternativethemeslidecaptiontextcolor3]]";
        }
      }
    }
    // Left/right controls for nav.
    .carousel-control {
      color: ~"[[setting:alternativethemeslidebuttoncolor3]]";

      // Hover/focus state.
      &:hover,
      &:focus {
        color: ~"[[setting:alternativethemeslidebuttonhovercolor3]]";
      }
      i {
        color: ~"[[setting:alternativethemeslidebuttoncolor3]]";
        &:hover,
        &:focus {
          color: ~"[[setting:alternativethemeslidebuttonhovercolor3]]";
        }
      }
    }

    // Carousel indicator pips.
    .carousel-indicators {
      box-shadow: 0px 0px 8px ~"[[setting:alternativethemeslidebuttoncolor3]]";
      li {
        background-color: ~"[[setting:alternativethemeslidebuttoncolor3]]";
        .opacity(75);
      }
      .active {
        background-color: ~"[[setting:alternativethemeslidebuttonhovercolor3]]";
      }
    }
  }

  .block {
    a {
      color: ~"[[setting:alternativethemeurlcolor3]]";
    }
    a:hover {
      color: ~"[[setting:alternativethemehovercolor3]]";
    }
    .header .title h2 {
      color: ~"[[setting:alternativethemetextcolor3]]";
      &:before {
        color: ~"[[setting:alternativethemeiconcolor3]]";
      }
    }
    .icon {
      color: ~"[[setting:alternativethemeiconcolor3]]";
    }
  }

  .block_rss_client {
    .footer a {
      background-color: ~"[[setting:alternativethemeurlcolor3]]";
      &:hover {
        background-color: ~"[[setting:alternativethemehovercolor3]]";
      }
    }
  }

  .block_login {
    .footer a {
      background-color: ~"[[setting:alternativethemecolor3]]";
      &:hover {
        background-color: ~"[[setting:alternativethemehovercolor3]]";
      }
    }
  }

  #page-site-index h2.headingblock:before {
    color: ~"[[setting:alternativethemetextcolor3]]";
  }

  .service i {
    color: ~"[[setting:alternativethemeiconcolor3]]";
  }

  #page-footer {
    border-top-color: ~"[[setting:alternativethemecolor3]]";
    .footnote {
      a, a:visited {
        color: ~"[[setting:alternativethemeurlcolor3]]" !important;
      }
    }
    .block_login input[type="submit"] {
      background-color: ~"[[setting:alternativethemecolor3]]";
      &:hover {
        background-color: ~"[[setting:alternativethemehovercolor3]]";
      }
    }
    .block_rss_client .content a {
      color: ~"[[setting:alternativethemeurlcolor3]]";
    }
  }

  #page-footer .block_html ul li:before,
  #greyboxright ul li:before {
    background-color: ~"[[setting:alternativethemecolor3]]";
  }

  p.tree_item {
    &.leaf a {
      > i {
        color: ~"[[setting:alternativethemeiconcolor3]]";
      }
      &:hover, &:focus {
        color: ~"[[setting:alternativethemehovercolor3]]";
        > i {
          color: inherit;
        }
      }
    }
    &.branch {
      color: ~"[[setting:alternativethemeurlcolor3]]";
      &:before {
        color: ~"[[setting:alternativethemeiconcolor3]]";
      }
      &:hover, &:focus {
        color: ~"[[setting:alternativethemehovercolor3]]";
        &:before {
          color: inherit;
        }
        a {
          color: inherit;
        }
      }
      &.emptybranch {
        &:before {
          color: ~"[[setting:alternativethemeiconcolor3]]";
        }
        &:hover, &:focus {
          &:before {
            color: ~"[[setting:alternativethemehovercolor3]]";
          }
        }
      }
    }
  }

  .afeature:hover {
    border-color: ~"[[setting:alternativethemecolor3]]";
  }

  .afmatter i {
    color: ~"[[setting:alternativethemeiconcolor3]]";
  }

  .myprofileitem.picture:hover {
    border-color: ~"[[setting:alternativethemecolor3]]";
  }

  .socials {
    p {
      color: ~"[[setting:alternativethemetextcolor3]]";
    }
    img:hover {
      box-shadow: 0 0 10px 0 ~"[[setting:alternativethemecolor3]]";
    }
  }

  .nav-tabs > li {
    > a {
      color: ~"[[setting:alternativethemenavcolor3]]";
      background-color: ~"[[setting:alternativethemecolor3]]";
      &:hover, &:focus {
        color: ~"[[setting:alternativethemecolor3]]";
        background-color: ~"[[setting:alternativethemenavcolor3]]";
      }
    }
    &.active > a {
      color: ~"[[setting:alternativethemetextcolor3]]";
      background-color: #fff;  // TODO: Pagecolour.
    }
  }

  .performanceinfo {
    border-color: ~"[[setting:alternativethemeiconcolor3]]";
    var {
      background-color: ~"[[setting:alternativethemecolor3]]";
      color: ~"[[setting:alternativethemenavcolor3]]";
    }
    h2 {
      color: ~"[[setting:alternativethemetextcolor3]]";
      border-bottom-color: ~"[[setting:alternativethemeiconcolor3]]";
      &:before {
        color: ~"[[setting:alternativethemeiconcolor3]]";
      }
    }
    span {
      color: ~"[[setting:alternativethemetextcolor3]]";
    }
    #cache:before, #load:before, #memory:before, #peakmemory:before, #session:before, #included:before, #dbqueries:before, #dbtime:before {
      color: ~"[[setting:alternativethemeiconcolor3]]";
    }
  }

  #page-mod-quiz-edit .questionbankwindow.block div.header {
    background-color: ~"[[setting:alternativethemecolor3]]";
  }

  table#user-grades {
    th.item, th.categoryitem, th.courseitem {
      border-bottom-color: ~"[[setting:alternativethemecolor3]]";
    }
  }

  table#user-grades td.controls,
  .path-grade-report-grader table tr.avg .cell,
  .path-grade-report-grader table tr.range .cell {
    background-color: ~"[[setting:alternativethemecolor3]]";
  }

  .path-grade-report-grader table#fixed_column th {
    border-right-color: ~"[[setting:alternativethemecolor3]]";
  }
  &.dir-rtl .path-grade-report-grader table#fixed_column th {
    border-left-color: ~"[[setting:alternativethemecolor3]]";
  }

  .back-to-top {
    color: ~"[[setting:alternativethemecolor3]]";
  }

  &.categoryicons .course_category_tree .category[data-categoryid] {
    &:hover {
      background-color: ~"[[setting:alternativethemecolor3]]";
      > .info > .categoryname a {
        color: ~"[[setting:alternativethemenavcolor3]]";
        i {
          color: inherit;
        }
      }
    }
  }

  .commands {
    color: ~"[[setting:alternativethemecolor3]]";
    a:hover {
      color: ~"[[setting:alternativethemehovercolor3]]";
    }
  }

  .drag-handle::before {
    color: ~"[[setting:alternativethemecolor3]]";
    a {
      color: ~"[[setting:alternativethemecolor3]]";
    }
  }

  #section_footer {
    color: ~"[[setting:alternativethemetextcolor3]]";
  }

  .nav_icon {
    color: ~"[[setting:alternativethemecolor3]]";
    &:hover {
      color: ~"[[setting:alternativethemehovercolor3]]";
    }
  }

  .actions a {
    color: ~"[[setting:alternativethemeurlcolor3]]";
  }

  .moodle-core-dragdrop-draghandle:before, .moodle-core-dragdrop-draghandle a {
    color: ~"[[setting:alternativethemeurlcolor3]]";
  }
  .menu a.menu-action,
  .course-item-actions a,
  .actions a {
    > i {
      color: ~"[[setting:alternativethemeiconcolor3]]";
    }
    &:hover {
      > i {
        color: ~"[[setting:alternativethemehovercolor3]]";
      }
    }
  }
  .moodle-actionmenu[data-enhanced].show {
    .menu {
      background-color: @white; // TODO: Page background colour needs to be a setting.
       a {
        color: ~"[[setting:alternativethemeurlcolor3]]";
        &:hover {
          color: @white; // TODO: Page background colour needs to be a setting.
          background-color: ~"[[setting:alternativethemeurlcolor3]]";
          .fa:before {
            color: @white; // TODO: Page background colour needs to be a setting.
          }
        }
      }
    }
  }
  #page {
    form {
      .form-buttons,
      table#form td.submit,
      .form-buttons,
      .path-admin .buttons,
      #fitem_id_submitbutton,
      .fp-content-center
      form+div,
      div.backup-section+form,
      #fgroup_id_buttonar,
      fieldset:last-of-type.hidden {
        #fgroup_id_buttonar {
          background-color: ~"[[setting:alternativethemecolor3]]";
        }
      }
      #fitem_id_submitbutton {
          background-color: ~"[[setting:alternativethemecolor3]]";
      }
    }
  }

  #page, #region-main {
    form {
      .form-buttons, #fgroup_id_buttonar {
        background-color: ~"[[setting:alternativethemecolor3]]";
      }
    }
  }
}

@media (max-width: 979px) {
  .essential-colours-alternative3 {
    .nav-collapse {
      background-color: ~"[[setting:alternativethemecolor3]]";
      .dropdown-menu > li > a,
      .dropdown-menu > li > a:visited {
        color: ~"[[setting:alternativethemenavcolor3]]";
        i {
          color: inherit;
          background-color: ~"[[setting:alternativethemenavcolor3]]";
          border: 1px solid ~"[[setting:alternativethemenavcolor3]]";
          border-radius: 3px;
          margin-top: 2px;
          vertical-align: middle;
        }
      }

      /* @group Custom Menu */
      .dropdown-menu > li > a:hover,
      .dropdown-menu > li > a:focus,
      .dropdown-submenu:hover > a,
      .dropdown-submenu:focus > a {
        color: ~"[[setting:alternativethemecolor3]]";
        background-color: ~"[[setting:alternativethemenavcolor3]]";
      }
    }
    .navbar .navbar-inner .nav-collapse .nav > li.dropdown ul.dropdown-menu > li > a {
      color: ~"[[setting:alternativethemecolor3]]";
      &:hover, &:focus {
        background-color: ~"[[setting:alternativethemecolor3]]";
        color: ~"[[setting:alternativethemenavcolor3]]";
      }
    }
    .navbar .navbar-inner .nav-collapse .nav > li.dropdown a {
      &:hover, &:focus, &.open {
        background-color: ~"[[setting:alternativethemecolor3]]";
        color: ~"[[setting:alternativethemenavcolor3]]";
      }
    }
    .navbar .navbar-inner {
      .dropdown-menu > li > a:hover,
      .dropdown-menu > li > a:focus,
      .dropdown-submenu:hover > a,
      .dropdown-submenu:focus > a {
        color: ~"[[setting:alternativethemecolor3]]";
        background-color: ~"[[setting:alternativethemenavcolor3]]";
        background-image: none;
      }
    }
  }
}

/* @end */